<!--
设备概览页面
-->
<template>
  <div style="margin-left: 14px">
    <div style="margin-top: 8px">
      <h3>{{ $t('exportPdf.deviceDetail') }}</h3>
      <a-table
        bordered
        :data-source="detailDataSource"
        :columns="deviceColumns"
        :pagination="false"
        size="small"
      >
        <template slot="webpassTitle">
          <rj-space :size="8">
            <span>{{ $t('exportPdf.webAccount') }}</span>

            <NameAndPass
              :title="$t('exportPdf.batchEditWebAccount')"
              :isAll="true"
              @change="valueAllChange('webaccountpass', $event)"
            ></NameAndPass>
          </rj-space>
        </template>
        <template slot="telnetpassTitle">
          <rj-space :size="8">
            <span>{{ $t('exportPdf.telentAccount') }}</span>

            <NameAndPass
              :title="$t('exportPdf.batchEditTelentAccount')"
              :isAll="true"
              @change="valueAllChange('telnetaccountpass', $event)"
            ></NameAndPass>
          </rj-space>
        </template>
        <template slot="webaccountpass" slot-scope="text, record">
          <NameAndPass
            :title="$t('exportPdf.webAccount')"
            :name="record.webName"
            :pass="record.webPassword"
            :record="record"
            :key="`${record.id}web`"
            @change="valueChange(record, 'webaccountpass', $event)"
          ></NameAndPass>
        </template>
        <template slot="telnetaccountpass" slot-scope="text, record">
          <NameAndPass
            :title="$t('exportPdf.telnetAccount')"
            :name="record.telnetName"
            :pass="record.telnetPassword"
            :record="record"
            :key="`${record.id}telnet`"
            @change="valueChange(record, 'telnetaccountpass', $event)"
          ></NameAndPass>
        </template>
      </a-table>
    </div>
    <div v-if="manulDataSource.length > 0">
      <h3>{{ $t('exportPdf.manullyAddDevice') }}</h3>
      <a-table
        bordered
        :data-source="manulDataSource"
        :columns="manulColumns"
        :pagination="false"
        size="small"
      >
        <template slot="webaccountpass" slot-scope="text, record">
          <NameAndPass
            :title="$t('exportPdf.webAccount')"
            :name="record.webName"
            :pass="record.webPassword"
            :record="record"
            @change="valueChange(record, 'webaccountpass', $event)"
          ></NameAndPass>
        </template>
        <template slot="telnetaccountpass" slot-scope="text, record">
          <NameAndPass
            :title="$t('exportPdf.telnetAccount')"
            :name="record.telnetName"
            :pass="record.telnetPassword"
            :record="record"
            @change="valueChange(record, 'telnetaccountpass', $event)"
          ></NameAndPass>
        </template>
        <template slot="operation" slot-scope="text, record">
          <rj-space>
            <a href="javascript:;" @click="onEditDetail(record)">
              <icon-font type="ic-edit" style="font-size: 16px"
            /></a>

            <a href="javascript:;" @click="onDeleteDetail(record)">
              <icon-font type="ic-delete" style="font-size: 16px"
            /></a>
          </rj-space>
        </template>
      </a-table>
    </div>
    <div style="margin-top: 8px">
      <a href="javascript:;" @click="addDeviceDetail"
        ><a-icon type="plus" /> {{ $t('exportPdf.addDeviceDetail') }}</a
      >
    </div>
    <DeviceDetaillWin
      ref="deviceDetailWin"
      @refreshTable="getDetailDevice"
      :oldData="oldDetailData"
    ></DeviceDetaillWin>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { requestHttp, maccApi } from '@utils/index';
import DeviceDetaillWin from './deviceDetaillWin.vue';
import NameAndPass from './nameAndPass.vue';
import { RjModal } from '@components';
import { i18nRender } from '@/locales';
const COLUMNS = [
  {
    title: i18nRender('exportPdf.sno'),
    dataIndex: 'num',
    key: 'num',
    width: '50px',
  },
  {
    title: i18nRender('exportPdf.name'),
    dataIndex: 'aliasName',
    key: 'aliasName',
  },
  {
    title: i18nRender('exportPdf.sn'),
    dataIndex: 'sn',
    key: 'sn',
  },
  {
    title: i18nRender('exportPdf.deviceSN'),
    dataIndex: 'productClass',
    key: 'productClass',
  },
  {
    title: i18nRender('exportPdf.maccAddr'),
    dataIndex: 'mac',
    key: 'mac',
  },
  {
    title: i18nRender('exportPdf.ipAddr'),
    dataIndex: 'localIp',
    key: 'localIp',
  },
];
export default {
  name: 'deviceDetailList',
  props: {},
  components: { DeviceDetaillWin, NameAndPass },
  data() {
    return {
      deviceColumns: [
        ...COLUMNS,
        {
          dataIndex: 'webName',
          key: 'webName',
          scopedSlots: {
            customRender: 'webaccountpass',
            title: 'webpassTitle',
          },
        },
        {
          dataIndex: 'telnetName',
          key: 'telnetName',
          scopedSlots: {
            customRender: 'telnetaccountpass',
            title: 'telnetpassTitle',
          },
        },
      ],
      manulColumns: [
        ...COLUMNS,
        {
          title: i18nRender('exportPdf.webAccount'),
          dataIndex: 'webName',
          key: 'webName',
          scopedSlots: { customRender: 'webaccountpass' },
        },
        {
          title: i18nRender('exportPdf.telentAccount'),
          dataIndex: 'telnetName',
          key: 'telnetName',
          scopedSlots: { customRender: 'telnetaccountpass' },
        },
        {
          title: i18nRender('exportPdf.oprate'),
          key: 'operation',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      detailDataSource: [],
      manulDataSource: [],
      isDeviceDetail: false,
      oldDetailData: {},
    };
  },
  mounted() {},
  created() {
    this.initView();
  },
  methods: {
    initView() {
      this.getDetailDevice();
    },
    /**
     * 获取设备详情清单
     */
    getDetailDevice() {
      let api = `/delivery/device/details?group_id=${this.groupId}`;
      requestHttp({
        api: api,
        method: 'GET',
      }).then((ret) => {
        let list = [];
        let manulList = [];
        let allList = ret.list;
        for (let i = 0; i < allList.length; i++) {
          if (allList[i].addingMode == 'MANUAL') {
            manulList.push(allList[i]);
          } else {
            list.push(allList[i]);
          }
        }
        this.allList = allList;
        this.detailDataSource = this.addNum(list);
        this.manulDataSource = this.addNum(manulList);
      });
    },
    addNum(list) {
      let i = 1;
      list = list.map((item) => {
        item.num = i++;
        return item;
      });
      return list;
    },

    onEditDetail(record) {
      this.oldDetailData = { ...record };
      this.$refs.deviceDetailWin.showModal();
    },
    onDeleteDetail(record) {
      let self = this;
      RjModal.confirm({
        title: this.$t('exportPdf.isDelete'),
        // content: (h) => <div style="color:red;">Some descriptions</div>,
        onOk() {
          let api = `/delivery/device/detail/del?groupId=${self.groupId}&id=${record.id}`;
          requestHttp({
            api: api,
            method: 'DELETE',
          }).then(() => {
            self.getDetailDevice();
          });
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },
    addDeviceDetail() {
      this.oldDetailData = {};
      this.$refs.deviceDetailWin.showModal();
    },
    //批量修订web或Telnet用户名密码
    valueAllChange(index, form) {
      let list = [];
      for (let i = 0; i < this.allList.length; i++) {
        let record = this.allList[i];
        let item = {
          id: record.id,
        };
        if (index == 'webaccountpass') {
          item.webName = form.checkName;
          item.webPassword = form.checkPass;
          item.telnetName = record.telnetName;
          item.telnetPassword = record.telnetPassword;
        } else {
          item.telnetName = form.checkName;
          item.telnetPassword = form.checkPass;
          item.webName = record.webName;
          item.webPassword = record.webPassword;
        }
        list.push(item);
      }
      this.setNamePassConfig(list);
    },
    /**
     * 修订单个web或者Telnet的用户名密码
     */
    valueChange(record, index, form) {
      let item = {
        id: record.id,
      };
      if (index == 'webaccountpass') {
        item.webName = form.checkName;
        item.webPassword = form.checkPass;
        item.telnetName = record.telnetName;
        item.telnetPassword = record.telnetPassword;
      } else {
        item.telnetName = form.checkName;
        item.telnetPassword = form.checkPass;
        item.webName = record.webName;
        item.webPassword = record.webPassword;
      }
      this.setNamePassConfig([item]);
    },
    async setNamePassConfig(list) {
      const results = await requestHttp({
        api: `${maccApi.DELIVERY_DEVICE_DETAIL_PWD}`,
        method: 'PUT',
        params: {
          list: list,
          groupId: this.groupId,
        },
      });
      if (results && results.code == 0) {
        this.$message.success(this.$t('exportPdf.settingSuccess'));
        this.initView();
      } else {
        this.$message.error(results.msg);
      }
    },
  },
  computed: {
    ...mapState('Group', ['groupId']),
  },
};
</script>
<style lang="less" scoped>
h3 {
  font-size: 14px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>
